<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>词频分析Top_N</title>
<!--    <script src="echarts.min.js"></script>
    <script src="echarts-wordcloud.js"></script>-->
    <script th:src="@{js/echarts.min.js}"></script>
    <script th:src="@{js/echarts-wordcloud.js}"></script>
    <script th:src="@{js/jquery-3.3.1.js}"></script>

</head>
<body>
<div id="main1" style="width: 600px;height: 500px; "></div>
<div id="main2" style="width: 1600px;height: 600px; "></div>
<script  th:inline="javascript">
    var mycharts = echarts.init(document.getElementById("main1"));
    //用来存储数据
    /*var jsonlist = [];*/
    var jsonlist =[[${frequency}]];


    // 人像的base64编码
    image1= ""

    var maskResource = new Image()
    maskResource.src=image1;
    var option ={
        //设置标题，居中显示
        title:{
            text: '词云图',
            left:'center',
        },
        //数据可以点击
        tooltip:{

        },

        series:[
            {
                drawOutOfBound:true,
                maskImage:maskResource,
                //词的类型
                type: 'wordCloud',
                //设置字符大小范围
                sizeRange:[20,108],
                rotationRange:[-45,90],
                textStyle: {
                    normal:{
                        //生成随机的字体颜色
                        color:function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',')+')';
                        }
                    }

                },
                //不要忘记调用数据
                data:jsonlist
            }
        ]

    };
    //加载图像，将数据放在图像中
    maskResource.onload = function(){
        mycharts.setOption(option)
    };

     // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: '词频柱状图'
        },
        tooltip: {},
        legend: {
            data:['词频']
        },
        xAxis: {
            data: [[${strings}]],
            textStyle:{
                fontSize : 20
            },
            axisLabel: {//x轴文字垂直显示
                interval: 0,
                formatter:function(value)
                {
                    return value.split("").join("\n");
                }
            }
        },
        yAxis: {},
        series: [{
            name: '词频',
            type: 'bar',
            data: [[${values}]]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option2);
</script>

</body>
</html>